<template>
<div class="bg">
    <div class="top_nav">
      <!-- <img @click="returnTap"
        class="return_icon"
        src="../../../static/images/me/leftreturn.png"
        alt=""
      /> -->
      <van-icon
        name="arrow-left"
        size="20"
        class="return_icon"
        color="#fff"
        @click="returnTap"
      />
      <span class="nav_title">我的二维码</span>
      <!-- <img class="btn" src="../../../static/images/me/blackdot.png" alt="" @click="btnEvent"> -->
      <van-icon name="ellipsis" class="btn" size="20" @click="btnEvent"/>
    </div>
    <div class="content">
        <div class="content_top">
             <img class="headimg" src="../../../static/images/me/headimg.png">
             <div>
                 <div class="name">小李</div>
                 <div class="address">广东 山中</div>
             </div>
        </div>
        <div class="code_icon"><img src="../../../static/images/me/codef.jpeg" alt="" ></div>
        <div class="tip">扫一扫上面的二维码图案，让我们沟通吧</div>
    </div>
 <div class="bottom_choice" v-if="isshow">保存图片</div>
  <div class="bottom_close" v-if="isshow" @click="btnEvent">取消</div>
</div>    
</template>
<script>
export default{
    data(){
        return{
         isshow:false
        }
    },
    methods:{
         returnTap(){
          this.$router.go(-1)
      },
        btnEvent(){
         this.isshow = !this.isshow
        }
    }
}
</script>
<style  scoped>
.bg{
    background: #4AC7D7;
  width: 100vw;
  height: 100vh;
}
.top_nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 25px;
  background: #4AC7D7;
  color: #fff;
}
.return_icon {
  /* width: 15px;
  height: 15px; */
  /* transform: rotate(180deg); */
}
.btn {
/* width: 25px;
height: 25px; */
}
.nav_title{
   
}
.content{
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    margin: 50px 20px 0px 20px;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
}
.headimg{
  
    height: 50px;
    width: 50px;
    margin-right: 10px;
}
.content_top{
    display: flex;
    align-items: center;
    width: 100%;
}
.address{
    margin-top: 10px;
    font-size: 12px;
    color: #A9A9A9;
}
.code_icon{
height: 250px;
width: 250px;
margin: 10px 0;
}
.code_icon img{
    width: 100%;
    height: 100%;
}
.tip{
    color: #808080;
    font-size: 12px;
}
.bottom_close{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #fff;
}
.bottom_choice{
    position: fixed;
    bottom: 55px;
    right: 0;
    width: 100%;
    height: 50px;
     line-height: 50px;
    text-align: center;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
     background: #fff;
}
</style>
